Flutter3 と Amplify UI Components で認証付きのWebページを作ってみました

1 はじめに

CX事業本部デリバリー部の平内（SIN）です。

Flutterは、iOS・Androidなどで共通したUIを一度に作ることができるフレームワークですが、Webアプリでも利用することができます。 今回は、Amplify UI Components を使用して、簡単に認証付きのWebページを作成してみました。

なお、Flutter対応のAmplify Authenticationは、2022/08/28現在、Developers Previewであり、Flutter SDK 3.0.0以上が必要です。

https://ui.docs.amplify.aws/flutter/connected-components/authenticator

https://docs.amplify.aws/lib/auth/getting-started/q/platform/flutter/#prerequisites

2 環境

作業した環境は以下の通りで、Flutterは最新の3.0.5です。

% flutter --version
Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f1875d570e (6 weeks ago) • 2022-07-13 11:24:16 -0700
Engine • revision e85ea0e79c
Tools • Dart 2.17.6 • DevTools 2.12.2

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.70.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

3 Flutter アプリ作成

最初にFlutterのアプリを作成します。

% flutter create sample_app
% cd sample_app

続いて、pubspec.yamlに下記を追記して、Amplify用のライブラリを追加します。

dependencies:
  amplify_flutter: ^1.0.0-0
  amplify_auth_cognito: ^1.0.0-0
  amplify_authenticator: ^1.0.0-0

% flutter pub get

4 Amplifyアプリ作成

最初に認証機能だけを有効にしてAmplifyアプリを作成します。

% amplify init
% amplify add auth
>configuration: Default configuration
>sign in: Username
>configure advanced settings: No, I am done.

% amplify push

lib/main.dartは、次のように編集しました。

import 'dart:developer';

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';

import 'amplifyconfiguration.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  void initState() {
    super.initState();
    _configureAmplify();
  }

  // MyAppの表示前にAmplifyの初期化を行う
  void _configureAmplify() async {
    try {
      await Amplify.addPlugin(AmplifyAuthCognito());
      await Amplify.configure(amplifyconfig);
      log('Successfully configured ?');
    } on Exception catch (err) {
      log('Error configuring Amplify: $err');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Authenticator( // Amplify UI Components
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        builder: Authenticator.builder(),
        home: const HomePage(),
      ),
    );
  }
}

// ログイン後に表示されるページ
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
        actions: [
          IconButton(
            icon: const Icon(Icons.logout),
            onPressed: () {
              Amplify.Auth.signOut();
            },
          ),
        ],
      ),
      body: Container(
        color: Colors.white,
      ),
    );
  }
}

この時点で、デバイスをChromeにしてデバッグ実行すると、ローカルで動作を確認できます。

5 ホスティング

Amplifyでホスティングを行うために、hostingを追加します。

% amplify add hosting
✔ Select the plugin module to execute · Amazon CloudFront and S3
? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
? hosting bucket name (sampleapp-20220828091131-hostingbucket)

後ほど、リソースを配置するため、上記のBucket名(sampleapp-20220828091131-hostingbucket)をメモしておきます。

publishすることで、S3バケット及び、CloudFrontが準備されます。

% amplify publish
Hosting endpoint: https://d3lpb0dfkqt5bx.cloudfront.net

Hosting endpointが、CloudFrontにアクセスするためのドメイン名(d3lpb0dfkqt5bx.cloudfront.net)となるので、メモしておきます。

6 Webリソース作成

Webのリソースは、以下のコマンドで、build/webに作成されます。

% flutter build web

build/webの内容を全てS3バケットにアップロードします。

これで、https://d3lpb0dfkqt5bx.cloudfront.net/index.htmlからアクセス可能になります。

7 最後に

今回は、Amplify UI Components を使用して、簡単に認証付きのWebページを作成してみました。

Amplifyで提供されるコンポーネントを使用することで、ログイン完了までのUIが、超簡単に実装できます。Webページでもこれが利用できることは、個人的に非常に嬉しいです。